<template>
  <div>
    <NavBarVue>
      <template v-slot:left>
        <van-icon name="arrow-left" @click="returnHome()"></van-icon>
      </template>
      <template v-slot:title>
        <van-cell-group>
          <van-field
            v-model="search"
            left-icon="search"
            placeholder="请输入主题"
            clearable
          ></van-field>
        </van-cell-group>
      </template>
      <template v-slot:right>
        <text class="search_txt" @click="Search()">搜索</text>
      </template>
    </NavBarVue>
    <div class="focus">
      <InfoBoxVue
        class="info_box"
        v-for="(item, index) in list"
        :key="index"
        @click="detailInfo(item.uid, item.pid)"
      >
        <template v-slot:img>
          <van-image
            fit="contain"
            radius="6 6 0 0"
            :src="item.imageUrl"
            alt="fail"
            class="img"
          ></van-image>
        </template>
        <template v-slot:title>{{ item.title }}</template>
        <template v-slot:head_img>
          <van-image
            round
            class="head_img"
            width="20"
            height="20"
            :src="item.headUrl"
          ></van-image>
        </template>
        <template v-slot:author_name>{{ item.name }}</template>
        <template v-slot:like_cnt>
          <div>
            {{ item.likes }}
          </div>
        </template>
      </InfoBoxVue>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import NavBarVue from "../../../components/NavBar.vue";
import InfoBoxVue from "../../../components/Home/InfoBox.vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      search: "",
      list: [],
    };
  },
  methods: {
    returnHome() {
      this.$router.go(-1);
    },
    detailInfo(uid, pid) {
      this.$router.push("/home/detailinfo/" + uid + "/" + pid);
    },
    Search() {
      this.list = [];
      axios.get("/js/data.json").then((res) => {
        var item = res.data.find;
        for (var i in item) {
          if (item[i].title.indexOf(this.search) != -1) {
            this.list.push(item[i]);
          }
        }
        console.log(this.list);
        if (this.search.length == 0) {
          this.list = [];
          Toast.fail("没有数据，请重新输入");
        }
        this.search = "";
      });
    },
  },
  components: { NavBarVue, InfoBoxVue },
};
</script>

<style scoped>
.search_txt {
  color: rgb(25, 137, 250);
}
.focus {
  margin: 40px 10px 0 8px;
  width: 95%;
  height: 100%;
  line-height: 20px;
  text-align: center;
  column-count: 2;
  column-gap: 7px;
}
.info_box {
  /* margin-top: 10px; */
  height: 100%;
  break-inside: avoid;
}
.img {
  width: 100%;
  border-radius: 6px 6px 0 0;
}
.head_img {
  margin-left: 10px;
  width: 20px;
  height: 20px;
  line-height: 30px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(187, 187, 187, 100);
}
</style>